<template>
  <div style="height:100%;">
         <!-- 背景图 -->
    <div class="background"></div>
    <!-- 右侧输入框 -->
    <div class="all">
        <div class="ch1">欢迎使用</div>
        <div class="ch2">系统登陆</div>
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px">
            <el-form-item label="用户名" prop="userName">
                <el-input class="user2" v-model="ruleForm.userName" placeholder="请输入用户名">
                    <img slot="prefix" class="user3" src="../assets/user.png"/>
                </el-input>
            </el-form-item>
            <el-form-item :label="label_test" prop="passWord">
                <!-- <label slot="label">密&emsp;&emsp;&emsp;&emsp;码</label> -->
                <el-input class="user2" type="password" placeholder="请输入密码" v-model="ruleForm.passWord" show-password>
                    <img slot="prefix" class="user3" src="../assets/password.png"/>
                </el-input>
            </el-form-item>
            <el-button class="button" type="primary" @click="submitForm('ruleForm')">登陆</el-button>
        </el-form>
    </div>
    <!-- 底部文字 -->
    <div id="app1">
        <div class="title1">ORDER聚造</div>
        <div class="title2">ORDER聚造</div>
        <div class="title3">All Rights Reserved ©2021 版权所有 ｜ 粤ICP备18069755号</div>
    </div>
    <!-- 左边文字和图片 -->
    <div id="app2" class="all1">
        <div class="image1"></div>
        <div class="image2"></div>
        <span class="m1">双线质量管控体</span>
        <span class="m2">力求每件产品、每个细节都尽善尽美</span> 
        <span class="m3">够专业{{"\xa0\xa0"}}才放心</span>
    </div>
  </div>
</template>

<script>
//import '@/assets/list.css' //把css写在assets文件夹下 然后在此处引用全局
//import HelloWorld from './components/HelloWorld.vue'
import md5 from 'js-md5'
import Cookies from "js-cookie"
//import axios from 'axios'
//console.log(axios)


export default {
  name: 'Login',
  components: {
    //HelloWorld
  },
  data(){
    // var validatePass = (rule, value, callback) => {
    //     if (value === '') {
    //       callback(new Error('请输入密码'));
    //     } else {
    //       if (this.ruleForm.checkPass !== '') {
    //         this.$refs.ruleForm.validateField('checkPass');
    //       }
    //       callback();
    //     }
    //   };
    // var validatePass1 = (rule, value, callback) => {
    //     if (value === '') {
    //       callback(new Error('请输入用户名'));
    //     } else {
    //       if (this.ruleForm.checkPass !== '') {
    //         this.$refs.ruleForm.validateField('checkPass');
    //       }
    //       callback();
    //     }
    //   };
    return {
    //   userName:'',
    //   passWord:'',
      label_test: '密' + '\xa0\xa0\xa0' + '码' ,
      ruleForm: {
        userName:'',
        passWord:''
      },
      rules: {
          userName: [
           { required:false,message:'请输入用户名', trigger: 'blur' } //validator: validatePass,
          ],
          passWord: [
           { required:false,message:'请输入密码', trigger: 'blur' }
          ]
        }
    }
  },
  methods:{
    submitForm() {
        //console.log('this.$refs',this.$refs)
        this.$refs.ruleForm.validate((valid) => {
            if(valid){
                Cookies.set('token',this.ruleForm.userName);
                this.$http({
                    url:'/login',
                    method:'POST',
                    data:{
                        userName:this.ruleForm.userName,
                        passWord:md5(this.ruleForm.passWord),
                        platform:'Web'
                    }
                }).then(res => {
                    if(!res.errorMsg){
                        localStorage.setItem('token',res.token) //localStorage只能存储字符串，不能存储对象
                        localStorage.setItem('user',JSON.stringify(res))//此处用stringify转换成字符串
                        this.$router.push('/index/shouye')
                    }
                })
            }
        });
    }
  },
  created(){

  },
  mounted(){

  }
}
</script>

<!--scoped表示以下样式只在当前页面生效：局部样式 否则为全局变量-->
<style scoped>
body,html{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.background{
    width: 100%;    
    height: 100%;
    position: fixed;
    background: url(../assets/background.png) no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    top: 0px;
}
.all{
    width: 26%;
    height: 46.6%;
    background: #EFEFF0;
    border-radius: 21px 21px 21px 21px;
    opacity: 0.9;
    position: fixed;
    top:20%;
    right: 6%;
}
.ch1{
    width: 3.8%;
    height: 2%;
    font-size: 14px;
    font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
    font-weight: normal;
    color: #96A3B0;
    position:relative;
    margin-top:6%;
    margin-left:8%;
    white-space: nowrap;
}
.ch2{
    width: 110px;
    height: 60px;
    font-size: 22px;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    font-weight: bold;
    color: #4E4E4E;
    position: relative;
    margin-top: 6%;
    margin-left: 4%;
    white-space: nowrap;
}
.user{
    width: 84.6%;
    height: 10.3%;
    position: absolute;
    top: 32.5%;
    left: 8.4%;
}
.user1{
    width: 10.58%;
    height: 4.4%;
    font-size: 14px;
    font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
    font-weight: normal;
    color: #737474;
    white-space: nowrap;
    margin-left: 8%;
}
.user2{
    width: 90%; 
    height:10.3%;
    background-color: #F1F1F1; 
    border-radius: 5px 5px 5px 5px;
    opacity: 1;
    border: 1px solid #DFEFFF;
    position: absolute;
    top: 2%;
    left: 0%;
}
.user3{
    width: 13px;
    height: 15px;
    padding-left: 24%;
    padding-bottom: 0%;
    line-height: 12px;
}
.password{
    width: 84.6%;
    height: 10.3%;
    position: absolute;
    margin-top: 7%;
    left: 8.4%;
}
.p2{
    width: 13px;
    height: 15px;
    background: url(../assets/password.png) no-repeat;
    position: absolute;
    margin-top:1%;
    left: 20%;
    z-index: 100;
}
.button{
    width: 86.4%;
    height: 10.5%;
    border-radius: 20px 20px 20px 20px;
    border-style: none;
    opacity: 1;
    margin-left: 2%;
    /* position: absolute;
    top: 75.6%;
    left: 8.7%;
    font-size: 17px;
    font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
    font-weight: normal;
    color: #F4F4F5;
    vertical-align:middle;
    text-align: center;
    line-height: 10%; */
}
.title1{
    width: 211px;
    height: 48px;
    opacity: 0.4;
    font-size: 38px;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    font-weight: normal;
    color: #D7E8FA;
    position: fixed;
    bottom:3% ;
    left: 81.8%;
}
.title2{
    width: 118px;
    height: 26px;
    font-size: 21px;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    font-weight: bold;
    color: #409EFF;
    position: fixed;
    bottom: 2.7%;
    left: 82.29%;
}
.title3{
    width: 428px;
    height: 17px;
    font-size: 14px;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    font-weight: bold;
    color: #565656;
    position: fixed;
    bottom: 4%;
    left: 32.6%;
}
.all1{
    width: 18.4%;
    height: 42.4%;
    position: fixed;
    top: 26%;
    left: 6%;
}
.image1{
    width: 8.61%;
    height: 21%;
    background: #E1F2F9;
    opacity: 0.3;
    position: fixed;
    bottom: 52.5%;
    left: 6.25%;
}
.image2{
    width: 9.8%;
    height: 21.3%;
    background: #E1F2F9;
    opacity: 0.3;
    position: fixed;
    bottom: 31.2%;
    left: 11.5%;
}
.m1{
    height: 133px;
    width: 24px;
    font-size: 16px;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    font-weight: bold;
    color: #FEFEFE;
    writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/ 
    writing-mode: tb-lr;
    position: absolute;
    top:13px;
    left: 17%;
}
.m2{
    height: 270px;
    width: 21px;
    font-size: 14px;
    writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/ 
    writing-mode: tb-lr;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    font-weight: bold;
    color: #FFFFFF;
    position: absolute;
    top: 2px;
    left: 33%;
}
.m3{
    height: 205px;
    width: 37px;
    font-size: 25px;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/ 
    writing-mode: tb-lr;
    font-weight: bold;
    color: #6BB9DA;
    line-height: 0;
    position: absolute;
    top: 55px;
    left: 54%;
}
</style>
